<template>
  <div>
    <!--  顶部查询区域-->
    <div class="search-box">
      <a-form :form="form" @submit="handleSearch" :layout="formLayout">
        <a-form-item
            class="q-form"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="类目编号">
          <a-input
              v-decorator="[ 'id', {rules: [{ required: false, message: '请输入', }, ], },]" placeholder="请输入类目编号"
          />
        </a-form-item>
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="名称">
          <a-input
              v-decorator="[ 'title', {rules: [{ required: false, message: '请输入', }, ], },]" placeholder="请输入名称"
          />
        </a-form-item>
        <a-form-item
            class="q-form"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="父级类目编号">
          <a-input
              v-decorator="[ 'pid', {rules: [{ required: false, message: '请输入', }, ], },]" placeholder="请输入类目编号"
          />
        </a-form-item>
        <a-form-item
            class="q-form"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="根类目编号">
          <a-input
              v-decorator="[ 'rid', {rules: [{ required: false, message: '请输入', }, ], },]" placeholder="请输入类目编号"
          />
        </a-form-item>
        <a-form-item
            class="q-form"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="类目层级">
          <a-select
              mode="default"
              style="width: 200px"
              v-decorator="[
                  'level',
                  { initialValue:'' },
                  ]"
          >
            <a-select-option v-for="item in CategoryOptions" :key="item.key" :value="item.key">
             {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            class="q-form"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="状态">
          <a-select
              mode="default"
              style="width: 200px"
              v-decorator="[
          'status',
          { initialValue:'' },
        ]"
          >
            <a-select-option  v-for="item in statusEnum" :key="item.key" :value="item.key">
             {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-row>
          <a-form-item :wrapper-col="buttonItemLayout.wrapperCol" class="q-form-item">
            <a-button html-type="submit" class="q-btn">
              查询
            </a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
              重置
            </a-button>
          </a-form-item>
        </a-row>
      </a-form>
    </div>
    <!--  卡片区域-->
    <div class="card-box">
      <a-card :bordered="true">
        <a-button class="editable-add-btn" @click="$router.push('/shop/category-edit')">
          添加类目
        </a-button>
        <a-button class="editable-add-btn">
          更新类目缓存
        </a-button>
        <a-tabs type="card" v-model="activeKey" @change="tabChange">
          <a-tab-pane v-for="pane in tabsList" :key="pane.id" :tab="pane.title">
            <a-pagination
                class="pagination-box"
                v-model="q.pageNo"
                :page-size-options="pageSizeOptions"
                :total="total"
                :show-total="() => `共 ${total} 条`"
                show-size-changer
                :page-size="q.pageSize"
                @change="onChange"
                @showSizeChange="onShowSizeChange"
            >
              <template slot="buildOptionText" slot-scope="props">
                <span>{{ props.value }}条/页</span>
              </template>
            </a-pagination>
            <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false" :scroll="{ x:'100%' }">
              <template slot="name" slot-scope="text, record" >
                <img class="show-img" :src="record.image" alt="">
                <span>{{record.name}}</span>
              </template>
              <template slot="operation" slot-scope="text, record">
                <a-button class="edit-btn" type="link" size="small" @click="$router.push({path:`/shop/category-edit?id=${record.id}`})">编辑</a-button>
                <a-button class="del-btn" type="link" size="small" @click="delUnit(record.id)">删除</a-button>
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>

      </a-card>
    </div>
  </div>
</template>

<script>
import { CategoryTypeEnum,CategoryOptions } from '@/common/constant'
import {getCategoryPage,deleteCategory} from '@/api'
export default {
  name: "unit",
  data() {
    return {
      CategoryOptions,
      statusEnum:[
          {
            key:"0",
            label:'已启用'
          },
        {
          key:"1",
            label:'已禁用'
          },
        {
          key:'',
            label:'全部'
          },
      ],
      activeKey:'',
      size: 'default',
      visible: false,
      isEdit:false,
      checkNick: false,
      form:this.$form.createForm(this),
      unit: {
        name:'',
        options:[]
      },
      pageSizeOptions: ['20','50','100'],
      total: 1,
      q:{
        pageSize:20,
        pageNo:1,
      },
      formLayout: 'inline',
      dataSource: [], //表格的数据源
      columns: [
        {
          title: '类目编号',
          dataIndex: 'id',
          width: 150,
          align:'center',
          scopedSlots: { customRender: 'id' },
        },
        {
          title: '名称',
          dataIndex: 'title',
          width: 300,
          align:'center',
          scopedSlots: { customRender: 'title' },
        },
        {
          title: '层级',
          dataIndex: 'level',
          width: 300,
          align:'center',
        },
        {
          title: '类别',
          dataIndex: 'type',
          width: 300,
          align:'center',
        },
        {
          title: '排序',
          dataIndex: 'sorts',
          width: 100,
          align:'center',
        },
        {
          title: '父级类目编号',
          dataIndex: 'pid',
          width: 200,
          align:'center',
        },
        {
          title: '根类目编号',
          dataIndex: 'rid',
          width: 200,
          align:'center',
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 100,
          align:'center',
        },
        {
          title: '创建时间',
          dataIndex: 'createdAt',
          width: 200,
          align:'center',
        },
        {
          title: '更新时间',
          dataIndex: 'updatedAt',
          width: 200,
          align:'center',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 200,
          align:'center',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      tabsList:[
        {
          id: '',
          title:'全部'
        },
        {
          id: 1,
          title:'后台类目'
        },
        {
          id: 0,
          title:'前台类目'
        },
      ]
    };
  },
  computed: {
    formItemLayout() {
      const { formLayout } = this;
      return formLayout === 'horizontal'
          ? {
            labelCol: { span: 3 },
            wrapperCol: { span: 9 },
          }
          : {};
    },
    buttonItemLayout() {
      const { formLayout } = this;
      return formLayout === 'horizontal'
          ? {
            wrapperCol: { span: 14, offset: 4 },
          }
          : {};
    },
  },
  methods: {
    tabChange(key) {
      this.q.type=key
      this.getCategoryPageFn()
    },
    handleChange(value) {
      console.log(`Selected: ${value}`);
    },
    //查询
    handleSearch(e) {
      e.preventDefault();
      this.form.validateFields(async (error, values) => {
        if(values.status.length){
          this.q.status=values.status
        }
        if(values.level.length){
          this.q.level=values.level
        }

        this.q.id=values.id
        this.q.type=''
        this.q.title=values.title
        this.q.pid=values.pid
        this.q.rid=values.rid

        this.getCategoryPageFn()
      });
    },
    //重置
    handleReset() {
      this.form.resetFields();
      this.q.pageNo=1
      this.q.id=null
      this.q.title=null
      this.q.level=''
      this.q.pid=null
      this.q.rid=null
      this.q.status=''
      this.getCategoryPageFn()
    },
    //页码发生变化的回调
    onChange(current) {
      this.q.pageNo = current
      this.getCategoryPageFn()
    },
    onShowSizeChange(current, pageSize) {
      this.q.pageNo = current
      this.q.pageSize=pageSize
      this.getCategoryPageFn()
    },

    //删除
    delUnit(id){
      this.$confirm({
        title: '提示',
        content: '确定要永久删除这条数据吗',
        okText: '确认',
        cancelText: '取消',
        onOk: async ()=> {
          if(this.total-(this.q.pageNo-1)*this.q.pageSize===1){
            this.q.pageNo--
            if(this.q.pageNo===0){
              this.q.pageNo=1
            }}
          await deleteCategory(id)
          this.getCategoryPageFn()
        },
        onCancel:()=> {},
      });
    },

    //获取单位分页
    async getCategoryPageFn(){
      const res=await getCategoryPage(this.q)
      this.dataSource=res.value.data.map(item=>{
        item.level=CategoryTypeEnum[item.level]
        item.type=item.type===0 ? '前台类目':'后台类目'
        item.status=item.status===0 ? '已启用':'已禁用'
        item.pid=item.pid===null?'/':item.pid
        item.rid=item.rid===null?'/':item.rid
        return item
      })
      this.q.pageSize=res.value.pageSize
      this.q.pageNo=res.value.pageNo
      this.total=res.value.total
    }
  },
  mounted(){
    this.getCategoryPageFn()
  }
};

</script>

<style scoped lang="less">
.search-box{
  margin-bottom: 50px;
  .btn-search{
    background-color: #010101;
    color: white;
    margin-right: 20px;
  }
}
.editable-add-btn{
  margin-bottom: 30px;
  background-color: #010101;
  color: white;
  margin-right: 15px;
}
.pagination-box{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.q-form{
  //margin-right: 70px;
}
.q-form-item{
  margin-left: 68px;
  margin-top: 20px;
}
.q-btn{
  background-color: #010101;
  color: white;
}
.edit-btn{
  color: black;
}
.del-btn{
  color: black;
}
.show-img{
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
</style>
